<template>
  <main>
    <div class="slider-area">
      <div class="slider-active">
        <div class="single-slider slider-height d-flex align-items-center">
          <div class="container">
            <div class="row">
              <div class="col-xl-6 col-lg-6 col-md-8 col-sm-10">
                <div class="hero__caption">
                  <h1>苏半夏</h1>
                  <P>{{yiyan}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <section class="blog_area section-padding">
      <div class="container">
        <div class="row">
          <div class="col-lg-8 mb-5 mb-lg-0">
            <div class="blog_left_sidebar">
              <article v-for="(item,index) in articleList" :key="index" class="blog_item">
                <div class="blog_item_img">
                  <img class="card-img rounded-0" :src="require('../assets/img/medicine/medicine' + (index %= 7)  +'.png')" alt="">
                  <a href="#" class="blog_item_date">
                    <h3>15</h3>
                    <p>Jan</p>
                  </a>
                </div>
                <div class="blog_details">
                  <a class="d-inline-block" @click="toArticle(item)">
                    <h2 class="blog-head" style="color: #2d2d2d;">{{ item.articleTitle }}</h2>
                  </a>
                  <p>{{ item.articleAbstract }}</p>
                  <ul class="blog-info-link">
                    <li><a href="#"><i class="fa fa-user"></i> 10 浏览</a></li>
                    <li><a href="#"><i class="fa fa-comments"></i> 03 评论</a></li>
                  </ul>
                </div>
              </article>
            </div>
          </div>
          <Slider />
        </div>
      </div>
    </section>
    <!-- Blog Area End -->
  </main>
</template>

<script>
import Slider from "@/components/slider";
import {getArticleList, getYiYan} from "@/api/blog";
export default {
  name: "index",
  components: {
    Slider,

  },
  data() {
    return {
      title: '草药库',
      articleList: [],
      yiyan: ''
    }
  },
  mounted() {
    this.medicine = this.$route.params.name
    this.getYiYan()
    this.getArticleList()
  },
  methods: {
    getArticleList(data){
      getArticleList({
        title:data
      }).then((res) =>{
        if (res != null){
          console.log(res)
          this.articleList = res
        }else alert("未查询相关内容")
      })
    },
    toArticle(data){
      console.log(data)
      this.$router.push({
        name: "article",
        params: {
          id: data.id
        }
      })
    },
    getYiYan(){
      getYiYan().then((res) => {
        if (res != null)
          this.yiyan = res
      })
    }
  }
}
</script>

<style scoped>
a:hover {
  text-decoration-line: none;
  cursor: pointer
}
</style>
